<template>
	<view class="knmnknmert">
		<view class="fz36 cf">
			输入验证码
		</view>
		<view class="mt20 z9 fz26">
			我们已将验证码发送至{{phones}}
		</view>

		<view class="gedrert mt50 cen fz50">
			<view class="">
				<input type="number" v-model="yzsdf.ijjhhsda" class="fz50 beertert " :focus="jhhddfa" @input="kjkjmnxdd(1)"
				 maxlength="1" />
			</view>
			<view class="">
				<input type="number" v-model="yzsdf.ijjhhsdb" class="fz50 beertert " :focus="jhhddfb" @input="kjkjmnxdd(2)"
				 maxlength="1" />
			</view>
			<view class="">
				<input type="number" v-model="yzsdf.ijjhhsdc" class="fz50 beertert " :focus="jhhddfc" @input="kjkjmnxdd(3)"
				 maxlength="1" />
			</view>
			<view class="">
				<input type="number" v-model="yzsdf.ijjhhsdd" class="fz50 beertert " :focus="jhhddfd" @input="kjkjmnxdd(4)"
				 maxlength="1" />
			</view>
		</view>
		<view class="mt60 hjjnnxeert cf cen mt100 " :class="daojishi>0?'acp':''" @tap="cjjseerr">
			重新获取<text v-if="daojishi>0">({{daojishi}}s)</text>
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone:'', //用户电话
				phones:'', //隐藏中间4位数字 方便显示
				key: '',
				isbianj: false,
				daojishi: 60,
				yzsdf: {
					ijjhhsda: '',
					ijjhhsdb: '',
					ijjhhsdc: '',
					ijjhhsdd: ''
				},
				jhhddfa: true,
				jhhddfb: false,
				jhhddfc: false,
				jhhddfd: false,
				type:""
			}
		},
		components: {},
		onLoad(e) {
			let jhhsd = this.$store.state.userskey
			this.type=e.type
			this.phone = jhhsd.phone
			this.phones= jhhsd.phone.slice(0,3)+ '****' + jhhsd.phone.slice(7,11)
			this.key = jhhsd.verification_key
			this.daojishise()
		},
		methods: {
			daojishise() {
				let hhhbgde = setInterval(a => {
					if(this.daojishi--<1){
						clearInterval(hhhbgde)
					}
				}, 1000)
			},
			cjjseerr(){
				if(this.daojishi>0){
					return
				}
				this.daojishi = 60
				this.daojishise()
				this.fasseddert()
			},
			async fasseddert(){
				if(!this.phone){
					uni.showToast({
						icon:"none",
						title:'请输入您使用的手机号'
					})
					return
				}
				let cs = {}
				cs.phone = this.phone
				let jbhss =  await this.post('/api/verificationCodes',cs)
				this.key = jbhss.key
				let jhhsd = this.$store.state.userskey
				jhhsd.verification_key = this.key
				
				this.$store.commit('setuserskey',jhhsd)
			},
			kjkjmnxdd(ty) {
				this.jhhddfa = false
				this.jhhddfb = false
				this.jhhddfc = false
				this.jhhddfd = false
				if(this.yzsdf.ijjhhsda&&this.yzsdf.ijjhhsdb&&this.yzsdf.ijjhhsdc&&this.yzsdf.ijjhhsdd){
					uni.navigateTo({
						url:"SetPassword?type="+this.type
					})
					let jhhsd = this.$store.state.userskey
					jhhsd.verification_code = this.yzsdf.ijjhhsda +'' +this.yzsdf.ijjhhsdb +'' +this.yzsdf.ijjhhsdc +'' +this.yzsdf.ijjhhsdd 
					this.$store.commit('setuserskey',jhhsd)
					return
				}
				if (ty == 4 && !this.yzsdf.ijjhhsdd) {
					this.jhhddfc = true
					return
				}
				if (ty == 3 && !this.yzsdf.ijjhhsdc) {
					this.jhhddfb = true
					return

				}
				if (ty == 2 && !this.yzsdf.ijjhhsdb) {
					this.jhhddfa = true
					return

				}
				if (this.yzsdf.ijjhhsdc) {
					this.jhhddfd = true
					return
				}
				if (this.yzsdf.ijjhhsdb) {
					this.jhhddfc = true
					return
				}
				if (this.yzsdf.ijjhhsda) {
					this.jhhddfb = true
					return
				}


			}
		},
		mounted() {}
	}
</script>
<style scoped>
	.gedrert {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 20upx;
	}

	.hjjnnxeert.acp {
		background: #97999F !important;
	}
</style>
